import React from 'react';
import styled from 'styled-components';

const Card = () => {
  return (
    <StyledWrapper>
      <div className="e-card playing">
        <div className="image" />
        <div className="wave" />
        <div className="wave" />
        <div className="wave" />
        <div className="infotop">
          <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 1350.000000 1350.000000" height={250} width={250} xmlns="http://www.w3.org/2000/svg" version={1.0}>
            <g stroke="none" fill="#00ff80" transform="translate(0.000000,1350.000000) scale(0.100000,-0.100000)">
              <path d="M6640 10520 c-114 -8 -246 -33 -326 -61 -33 -11 -76 -24 -97 -28 -21 -5 -44 -14 -50 -20 -6 -6 -17 -11 -25 -11 -18 0 -167 -75 -267 -134 -216 -129 -456 -365 -593 -586 -46 -73 -152 -299 -182 -385 -103 -300 -122 -612 -58 -933 11 -56 18 -109 14 -117 -5 -13 -48 -15 -304 -15 -218 0 -301 -3 -310 -12 -8 -8 -12 -58 -12 -160 0 -135 2 -148 19 -158 13 -6 152 -10 384 -10 l364 0 25 -37 c49 -74 61 -105 46 -114 -7 -5 -249 -9 -538 -9 -396 0 -529 -3 -538 -12 -17 -17 -17 -289 0 -306 9 -9 177 -12 694 -12 l682 0 81 -67 c62 -52 78 -70 69 -80 -8 -10 -109 -13 -513 -13 -442 0 -504 -2 -515 -15 -17 -20 -18 -291 -2 -307 12 -12 4241 -16 4260 -4 17 11 17 300 -1 314 -8 7 -378 12 -1142 15 -1202 4 -1205 4 -1390 53 -292 78 -591 285 -784 544 -72 96 -211 360 -211 399 0 6 -4 19 -9 29 -5 9 -17 47 -25 83 -86 370 -50 690 117 1039 67 139 246 365 359 452 18 14 42 34 53 45 35 33 162 112 252 157 103 52 208 90 307 111 39 8 87 19 106 25 19 5 74 10 122 10 120 0 118 -3 118 175 0 132 -2 145 -19 155 -11 5 -30 9 -43 8 -13 -1 -66 -5 -118 -8z" />
              <path d="M6630 10023 c-175 -29 -322 -78 -450 -151 -36 -20 -72 -40 -80 -44 -39 -17 -184 -143 -246 -215 -101 -114 -145 -176 -201 -283 -56 -105 -101 -238 -129 -375 -23 -113 -23 -394 0 -483 8 -31 22 -88 32 -127 43 -176 169 -388 327 -552 191 -198 423 -320 707 -373 101 -19 158 -20 1471 -20 1152 0 1368 2 1378 14 8 9 11 61 9 162 l-3 149 -1380 6 c-1064 4 -1391 8 -1430 18 -243 61 -390 142 -525 290 -90 99 -117 137 -165 231 -31 61 -45 98 -86 230 -10 32 -14 97 -14 220 1 167 2 180 32 276 54 175 136 309 273 442 81 80 122 108 230 160 263 127 518 136 817 28 69 -25 150 -73 230 -136 42 -33 83 -60 92 -60 9 0 60 44 114 98 119 120 121 127 37 197 -83 68 -190 138 -277 180 -81 40 -275 105 -313 105 -14 0 -63 7 -110 15 -96 17 -228 16 -340 -2z" />
              <path d="M6660 9531 c-175 -33 -308 -107 -435 -244 -81 -86 -123 -151 -168 -256 -35 -82 -46 -126 -56 -237 -21 -219 43 -433 176 -592 103 -122 160 -168 283 -225 190 -89 142 -86 1521 -87 1008 0 1188 2 1205 14 17 13 19 28 20 151 0 94 -3 141 -12 153 -12 16 -95 17 -1256 22 l-1243 5 -80 38 c-87 42 -124 73 -189 157 -54 70 -74 122 -87 222 -33 264 150 512 406 547 126 18 213 0 325 -65 111 -65 198 -189 226 -325 8 -40 17 -76 20 -81 3 -4 75 -8 160 -8 118 0 156 3 160 13 2 7 0 53 -5 102 -37 320 -272 577 -621 678 -64 19 -284 30 -350 18z" />
              <path d="M4444 6737 c-19 -11 -21 -296 -2 -315 15 -15 4724 -17 4748 -2 12 8 15 35 13 156 -1 81 -6 151 -10 155 -10 10 -4730 16 -4749 6z" />
              <path d="M6642 6252 l-1703 -2 -9 -26 c-15 -38 -13 -277 2 -292 17 -17 3749 -17 3766 0 17 17 17 292 -1 306 -19 16 -201 17 -2055 14z" />
            </g>
          </svg>
        </div>
      </div>
    </StyledWrapper>
  );
}

const StyledWrapper = styled.div`
  .e-card {
    margin: 50px auto;
    background: transparent;
    box-shadow: 0px 8px 28px -9px rgba(0, 0, 0, 0.45);
    position: relative;
    width: 240px;
    height: 330px;
    border-radius: 16px;
    overflow: hidden;
  }

  .wave {
    position: absolute;
    width: 540px;
    height: 700px;
    opacity: 0.6;
    left: 0;
    top: 0;
    margin-left: -50%;
    margin-top: -70%;
    background: linear-gradient(744deg, #00ff80, #009933 60%, #00cc44);
  }

  .icon {
    width: 3em;
    margin-top: -1em;
    padding-bottom: 1em;
  }

  .infotop {
    text-align: center;
    font-size: 20px;
    position: absolute;
    top: 4em;
    left: 0;
    right: 0;
    color: rgb(255, 255, 255);
    font-weight: 600;
  }

  .name {
    font-size: 14px;
    font-weight: 100;
    position: relative;
    top: 1em;
    text-transform: lowercase;
  }

  .wave:nth-child(2),
  .wave:nth-child(3) {
    top: 210px;
  }

  .playing .wave {
    border-radius: 40%;
    animation: wave 3000ms infinite linear;
  }

  .wave {
    border-radius: 40%;
    animation: wave 55s infinite linear;
  }

  .playing .wave:nth-child(2) {
    animation-duration: 4000ms;
  }

  .wave:nth-child(2) {
    animation-duration: 50s;
  }

  .playing .wave:nth-child(3) {
    animation-duration: 5000ms;
  }

  .wave:nth-child(3) {
    animation-duration: 45s;
  }

  @keyframes wave {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }`;

export default Card;
